<template>
  <div class="container" ref="echartsRefss"></div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
const echartsRefss = ref<HTMLElement>()
const ROOT_PATH =
  'https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'
onMounted(() => {
  //初始化echarts实例init（ dom ，'主题' ，其余参数如：{ renderer:'svg' }）
  const myEcharts = echarts.init(echartsRefss.value!)
  //要操作的配置
  const option = {
    // legend: {
    //   top: 'bottom',
    // },
    toolbox: {
      //   show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: [50, 250],
        center: ['50%', '50%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 20,
        },
        data: [
          { value: 40, name: 'rose 1' },
          { value: 38, name: 'rose 2' },
          { value: 32, name: 'rose 3' },
          { value: 30, name: 'rose 4' },
          { value: 28, name: 'rose 5' },
        ],
      },
    ],
  }
  //设置配置
  option && myEcharts.setOption(option)
})
</script>
